<template>
  <div class="headers">
    <div class="infomation">
      <div class="infos" v-if="isLogin">
        <van-image
          round
          class="avatar"
          width="100"
          height="100"
          @click="detail"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
      </div>
      <div class="info" v-if="isLogin">
        <p><van-icon name="user-circle-o" /> {{ username }}</p>
        <span><van-icon name="phone-o" /> {{ phone }}</span>
        </div>
    </div>
    <van-button round type="success" v-if="!isLogin" to="/login">登录</van-button>
    <van-button round type="success" v-else  @click="quit">退出登录</van-button>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getUserInfoList } from '@/api'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref<string>('')
const phone = ref<string>('')
const isLogin = ref<boolean>(false)

onMounted(async () => {
  // console.log('watchEffect');
  try {
    //等待异步代码完成
    const { data }: any = await getUserInfoList()
    const userDataInfo: any = window.localStorage.getItem('token')
    // console.log('userDataInfo', userDataInfo)

    if (userDataInfo) {
      isLogin.value = true
    }

    // console.log('data', data)
    //处理得到的数据
        username.value = data[1].params.username
        phone.value = data[1].params.phone

  } catch (error) {
    console.error('发生错误', error)
  }
})

function detail() {
  console.log('个人详情信息')

  router.replace('/detail-page')
}
function quit(){
  console.log('退出登录');
  window.localStorage.removeItem('token');
  window.location.reload();
  // isLogin.value = false

}
</script>

<style lang="scss" scoped>
.headers {
  min-height: 200px;
  overflow: hidden;
  width: 100%;
  background-color: #0273ff;
  position: relative;
}
.van-button {
  position: absolute;
  top: 70px;
  right: 40px;
}
.infomation{
  display: flex;
  position: absolute;
  top: 40px;
  left: 40px;
}
// .avatar{
//   border-radius: 50%;
//   width:100px;
//   height:100px;
// }
</style>
